<template>
   <div class="template-content">
        <ul>
            <draggable :animation="500"
                @change="handleDialog"
                :class="['template-info']"
                :list="typeList"
                :group="'template-info'"
                ghost-class="ghost"
                drag-class="chosen"
                handle=".drap-icon"
                :disabled="props.isDisabled"
                :options="{ draggable: '.card-item'}">
                <template v-if="typeList.length">
                    <li v-for="(item, index) in typeList" 
                        class="card-item"
                        :key="item.modelKey">
                        <div class="card-item-top">
                            <img v-if="!props.isDisabled" class="drap-icon" width="16" src="~@/assets/img/icon/sort.png" alt=""/>
                            <span>{{item.modelName}}</span>
                            <el-input
                                @input="handleDialog"
                                class="card-input"
                                v-model.trim="item.modelTitle"
                                :minlength="1"
                                :maxlength="20"
                                show-word-limit
                                :readonly="props.isDisabled"
                                placeholder="请重命名模板标题，空显示默认标题">
                            </el-input>
                            <i v-if="!props.isDisabled" class="del-icon" @click="handleDel(item, index)"></i>
                        </div>
                        <TemplateItem
                            @change-item="changeItem"
                            :is-disabled="props.isDisabled"
                            :detail="item"></TemplateItem>
                    </li>
                </template>
                 <NoData v-else title="请选择右边模板进行配置"></NoData>
            </draggable>
        </ul>
   </div>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next';
import TemplateItem from './template-item.vue'
import NoData from '@/components/no-data.vue'

const emit = defineEmits(['update:data', 'remove']);

const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return [];
        }
    },
    isDisabled: {
        type: Boolean,
        default: false
    }
})

const typeList = ref([]);

// 监听模板是否变更
watch(() => props.data, (val) => {
    typeList.value = val;
}, {deep: true});


// 拖拽完后更新数据
function handleDialog() {
   emit('update:data', typeList.value);
}

// 删除一个模版
function handleDel(item, index) {
   typeList.value.splice(index, 1);
   emit('remove', item);
   emit('update:data', typeList.value);
}

function changeItem(modelKey, list, type) {
    typeList.value.forEach(item => {
          if(item.modelKey === modelKey) {
              item[type] = list;
          }
    })
    emit('update:data', typeList.value);
}


</script>

<style lang="scss" scoped>

.template-content { 
    height: calc(100vh - 290px);
    overflow-y: auto;
    border: 1px solid #999999;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;
    width: calc(100% - 300px);
    ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    .card-item {
        border: 1px dashed #999999;
        border-radius: 4px;
        padding: 16px;
        margin-bottom: 16px;
    }
    .card-input {
        width: 400px;
        margin-left: 10px;
    }

    :deep(.tool-type-item) {
        border-radius: 4px;
        border: 1px dashed var(--color-primary);
        height: 48px;
        .type-item {
            display: none;
        }
    }
    .card-item-top {
        display: flex;
        align-items: center;
        position: relative;
        .drap-icon {
           cursor: move; 
           margin-right: 10px;
        }
    }
    .del-icon {
        background: url("~@/assets/img/icon/del-icon.png") no-repeat;
        width: 18px;
        height: 18px;
        display: inline-block;
        background-size: contain;
        position: absolute;
        right: 0px;
        cursor: pointer;
    }
}

</style>